<template>
  <div class="main" :key="HistogramLegend">
    <el-tabs>
      <div class="chartsStyle">
        <div class="chart-title">

          <tr style="height: 30px;">
            <td><span class="nature">背景颜色</span></td>
            <td>
              <el-color-picker v-model="backgroundColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr style="height: 30px;">
            <td><span class="nature">连接点颜色</span></td>
            <td>
              <el-color-picker v-model="pointColor" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>
          <tr style="height: 30px;">
            <td><span class="nature">标签颜色</span></td>
            <td>
              <el-color-picker v-model="color" show-alpha size="mini"></el-color-picker>
            </td>
          </tr>
          <br/>

          <tr>
            <td><span class="nature">连接点大小</span></td>
            <td>
              <el-input-number v-model="symbolSize" @change="setSymbolSize" :min="7" :max="20"  size="small" >
              </el-input-number>
            </td>
          </tr>
          <br/>
          <tr>
            <td><span class="nature">标签大小</span></td>
            <td>
              <el-input-number v-model="fontSize" @change="setFontSize" :min="7" :max="20"  size="small" >
              </el-input-number>
            </td>
          </tr>
          <br/>

          <tr>
            <td><span class="nature">连接线</span></td>
            <td>
              <el-select disabled="true" v-model="edgeShape" clearable placeholder="请选择" size="mini">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <br/>

          <tr>
            <td><span class="nature">图形布局</span></td>
            <td>
              <el-select v-model="layout" clearable placeholder="请选择" style="width: 150px">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <br/>

        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>

export default {
  data () {
    return {
      backgroundColor: '#d2dde6', // 背景颜色
      pointColor: '#000', // 连接点（如小圆圈）颜色
      color: '#0b0507', // 标签颜色
      symbolSize: 7, // 连接点（如小圆圈）大小
      fontSize: 7, // 标签大小
      layout: 'orthogonal', // 树图的布局   'radial'
      edgeShape: 'curve', // 连接线直线polyline  曲线curve

      options: [{
        value: 'polyline',
        label: '直线'
      }, {
        value: 'curve',
        label: '曲线'
      }],
      options2: [{
        value: 'orthogonal',
        label: '正交布局'
      }, {
        value: 'radial',
        label: '径向布局'
      }]
    }
  },
  methods: {
    setSymbolSize (value) {
      this.$store.state.treeLegend.symbolSize = value
    },
    setFontSize (val) {
      this.$store.state.treeLegend.fontSize = val
    }
  },
  watch: {
    backgroundColor (val) {
      this.$store.state.treeLegend.backgroundColor = val
      console.log('设置树状图背景色为' + val)
    },
    pointColor (val) {
      this.$store.state.treeLegend.pointColor = val
      console.log('设置树状图连接点颜色为' + val)
    },
    color (val) {
      this.$store.state.treeLegend.color = val
    },
    layout (val) {
      this.$store.state.treeLegend.layout = val
    },
    edgeShape (val) {
      this.$store.state.treeLegend.edgeShape = val
      console.log('树状图设置连接线为' + val)
    }

  }
}
</script>

<style lang="scss" scoped>
  .main{
    background-color: #E6E3E3;
  }
  .nature{
    font-size: 17px;
    font-weight:bold;

  }

</style>
